<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发现</title>
    <link rel="stylesheet" href="./css/find.css">
</head>
<body>
    <!-- 头部 -->
    <header>
        <div class="h_top">
            <div class="h_top1">
                <!-- 返回按钮 -->
            <a href="#"><div>Back</div></a>
            <span>分类</span>
            <!-- 地区 -->
            <div class="sel">
                <select name="" id="">
                    <option value="广州市">广州市</option>
                    <option value="深圳市">深圳市</option>
                    <option value="上海市">上海市</option>
                </select>
                <!-- 下拉框的三角形 -->
                <i></i>
            </div>
            </div>
        </div>

    <!-- 搜索框 -->
    <div class="inp">
        <input type="text" placeholder="请输入商品名称">
    </div>
    <!-- 搜索框下面部分 -->
    <div class="type">
        <span>大家都在搜</span>
    <div class="type_1">
        <a href="">寿司</a>
        <a href="">羽毛球</a>
        <a href="">火锅</a>
        <a href="">游泳馆</a>
        <a href="">电影</a>
        <a href="">周黑鸭</a>
        <a href="">KTV</a>
        <a href="">肯德基</a>
    </div>
    </div>
    </header>

    <!-- 内容 -->
    <main>
        <!-- 热门搜索 -->
        <div class="h_sch">
            <div>
                <img src="./images/find/热门搜索.png" alt="">
                <p> 热门搜索</p>
            </div>
            <div>
                <a href="#">更多</a>
                <img src="./images/classify/箭头.png" alt="">
            </div>
        </div>

        <!-- 热门搜索图片链接 -->
        <div class="h_sch1">
            <div>
                <a href="">
                    <img src="./images/find/热门搜索图1.png" alt="">
                </a>
            </div>

            <div>
                <a href="">
                    <img src="./images/find/热门搜索图2.png" alt="">
                </a>
                <a href="">
                    <img src="./images/find/热门搜索图3.png" alt="">
                </a>
                <a href="">
                    <img src="./images/find/热门搜索图4.png" alt="">
                </a>
            </div>

        </div>

        <!-- 推荐搜索 -->
        <div class="t_sch">
                    <div>
                        <img src="./images/find/推荐搜索.png" alt="">
                        <p> 推荐搜索</p>
                    </div>
                    <div>
                        <a href="#">更多</a>
                        <img src="./images/classify/箭头.png" alt="">
                    </div>
        </div>

        <!-- 推荐搜索图片链接 -->
        <div class="t_sch1">
            <a href="">
                <img src="./images/find/推荐搜索1.png" alt="">
            </a>

            <a href="">
                <img src="./images/find/推荐搜索2.png" alt="">
            </a>

            <a href="">
                <img src="./images/find/推荐搜索3.png" alt="">
            </a>
        </div>
    </main>
    
    <!-- 导航栏 -->
    <nav>
        <div class="f_nav">
            <div>
                <a href="./首页.html">
                    <img src="./images/find/导航1.png" alt="">
                </a>
                <a href="./首页.html">首页</a>
            </div>
            <div>
                <a href="./分类.html">
                    <img src="./images/find/导航栏2.png" alt="">
                </a>
                <a href="./分类.html">分类</a>
            </div>
            <div>
                <a href="./发现.html">
                    <img src="./images/find/导航栏3.png" alt="">
                </a>
                <a href="./发现.html">发现</a>
            </div>
            <div>
                <a href="./我的.html">
                    <img src="./images/find/导航栏4.png" alt="">
                </a>
                <a href="./我的.html">我的</a>
            </div>
        </div>
    </nav>
</body>
</html>